<template>
  <div class="f-login-container">
    <div class="f-language-selector">
      <!-- <el-select style="width: 90px" size="small" v-model="selectedLanguage" @change="changeLanguage">
        <el-option v-for="item in languageOptions" :key="item.value" :label="item.label"
          :value="item.value"></el-option>
      </el-select> -->
      <el-button style="width: 70px;margin-left: 10px;" size="small" round @click="signIn">{{
        $t("login.signIn")
        }}</el-button>
      <el-button style="width: 70px" size="small" round @click="register">{{
        $t("login.register")
        }}</el-button>
    </div>
    <el-card class="f-login-card">
      <div>
        <div style="color: #909399;margin-bottom: 45px;">
          {{ $t("login.createNewPassword") }}
        </div>
      </div>
      <div>
        <el-input maxlength="50" show-word-limit v-model="form.password" show-password
          :placeholder="$t('login.newPassword')" style="margin-bottom: 35px"></el-input>
        <el-input maxlength="50" show-word-limit v-model="form.confirmPassword" show-password
          :placeholder="$t('login.confirmPassword')" style="margin-bottom: 35px"></el-input>
        <el-button :loading="resetLoading" @click="resetPassword"
          style="background-color: #febc1c; color: black; width: 100%;font-weight:bold;">{{ $t("login.resetPassword") }}</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>

import { editPassword } from "../../api/userService";

export default {
  data() {
    return {
      form: {
        password: '',
        confirmPassword: '',
      },
      selectedLanguage: 'en',
      languageOptions: [
        { value: 'en', label: 'English' },
        { value: 'zh', label: '中文' }
      ],
      resetLoading: false,
      email: '',
    }
  },
  methods: {
    async resetPassword() {
      this.email = this.$route.query.restEmail;
      if (this.email === '' || this.form.confirmPassword === '') {
        this.$message.error(this.$t('login.passwordRequired'));
        return;
      }
      if (this.form.password !== this.form.confirmPassword) {
        this.$message.error(this.$t('login.passwordNotMatch'));
        return;
      }
      this.resetLoading = true;
      await editPassword(this.email, this.form.confirmPassword).then(res => {
        if (res.code === 200) {
          this.resetLoading = false;
          this.$message.success(this.$t('login.passwordChanged'))
          setTimeout(() => {
            this.$router.push('passwordChange');
          }, 1000);
        } else {
          this.resetLoading = false;
          this.$message.error(res.msg);
        }
      })
      
    },
    changeLanguage(e) {
      this.$nextTick(() => {
        localStorage.setItem('lang', e)
        this.$i18n.locale = e
      })
    },
    register(e) {
      this.$router.push("/register")
    },
    signIn() {
      this.$router.push("/login")
    }
  },
  mounted() {
    // 页面刷新后默认语言为英语
    localStorage.removeItem('lang')
    localStorage.setItem('lang', 'en')
  }
}
</script>

<style scoped>
::v-deep .select-popper .el-input__inner {
  border-radius: 15px;
}

::v-deep .el-input__placeholder {
  text-align: center;
}

@import "../../assets/css/ResetPassword.css";

@media (max-width: 600px) {
  .el-form {
    width: 100%;
  }
}
</style>
